<template>
  <el-popover
    ref="popoverRef"
    v-bind="popoverProps"
    :teleported="true"
    trigger="click"
    :virtual-ref="virtualTriggerRef"
    virtual-triggering
    :width="350"
  >
    <div style="overflow: auto; height: 330px">
      <div class="popover_content">
        <div class="icon_margin">
          <el-icon color="#3487ff"><Notification /></el-icon>
        </div>
        <div>
          <div class="font-bold text-[#3487ff] text-[16px]">
            {{ meetList?.summary || "-" }}
          </div>
          <div class="text-[#3487ff] mt-[4px]">
            {{ formatTimeRange(meetList?.startTime, meetList?.endTime) }}
          </div>
        </div>
      </div>
      <div class="popover_content">
        <div class="icon_margin">
          <el-icon><OfficeBuilding /></el-icon>
        </div>
        <div class="text-[12px]">
          {{ meetList?.meetingRoom?.[0]?.display_name || "-" }}
        </div>
      </div>
      <div class="popover_content">
        <div class="icon_margin">
          <el-icon><User /></el-icon>
        </div>
        <div class="flex items-center">
          <el-avatar :size="25" :src="meetList?.organizer?.avatar_url" />
          <span class="ml-[4px] text-[12px]"
            >{{ meetList?.organizer?.display_name || "-" }} ({{
              meetList?.organizer?.name || "-"
            }})</span
          >
          <span
            class="text-[#3487ff] bg-[#d0ddfc] text-[12px] ml-[6px] px-[4px] py-[2px] rounded-sm"
            >(组织者)</span
          >
        </div>
      </div>
      <div class="popover_content">
        <div class="icon_margin">
          <el-icon><UserFilled /></el-icon>
        </div>
        <div class="w-full">
          <CollapsiblePanel @toggleCollapse="onPanelToggle">
            <template #header>
              <div class="text-[12px]">
                <div>{{ meetList?.users?.length }}位参与者</div>
                <div class="text-[#a9aeb4]">
                  {{ total.accept }}人接受, {{ total.needs_action }}人未回复,
                  {{ total.reject }}人拒绝
                </div>
              </div>
            </template>
            <template #body>
              <template v-for="(item, index) in meetList?.users" :key="index">
                <div>
                  <AvatarState
                    :data="item"
                    :isShow="true"
                    class="flex items-center"
                  />
                </div>
              </template>
            </template>
          </CollapsiblePanel>
          <div v-if="!collapsed" class="flex items-center">
            <template
              v-for="(item, index) in meetList?.users?.slice(0, 5)"
              :key="index"
            >
              <AvatarState :data="item" class="mr-[8px]" />
            </template>
            <el-avatar :size="35" v-if="meetList?.users?.length > 5"
              >+{{ meetList?.users?.length - 5 }}</el-avatar
            >
          </div>
        </div>
      </div>
    </div>
  </el-popover>
</template>

<script setup>
import { getFeishuCalendarDetails } from "@/api/system/calendar.js";
import { formatTimeRange } from "@/utils/time.js";
import CollapsiblePanel from "../CollapsiblePanel/index.vue";
import AvatarState from "../avatarState/index.vue";
const popoverProps = defineProps();
const popoverRef = ref(null);
const virtualTriggerRef = ref(null);
const meetList = ref({});
const total = ref({
  accept: 0,
  reject: 0,
  needs_action: 0,
});
const showPopover = async (event) => {
  meetList.value = {};
  total.value.accept = 0;
  total.value.reject = 0;
  total.value.needs_action = 0;
  virtualTriggerRef.value = event.triggerElement;
  const { data } = await getFeishuCalendarDetails({ id: event.id });
  // 遍历用户数组，统计各个状态的数量
  data?.users?.forEach((user) => {
    if (total.value.hasOwnProperty(user.rsvp_status)) {
      total.value[user.rsvp_status]++;
    }
  });
  meetList.value = data || {};
};
const collapsed = ref(false);
const onPanelToggle = (val) => {
  console.log(collapsed);
  collapsed.value = val;
};
const hidePopover = () => {
  popoverRef.value?.hide(); // 隐藏 Popover
  meetList.value = {};
};

defineExpose({
  showPopover,
  hidePopover,
});
</script>
<style lang="scss" scoped>
.icon_margin {
  margin-right: 8px;
}
.popover_content {
  display: flex;
  margin-top: 8px;
  margin-bottom: 16px;
}
</style>
